import React, { Component } from 'react';
import './Myshoplist.scss'
import logo from '../imgs/001.gif'
import logo1 from '../imgs/002.gif'
import logo2 from '../imgs/003.gif'
import logo3 from '../imgs/004.gif'
import logo4 from '../imgs/005.gif'
import logo5 from '../imgs/006.gif'
import logo6 from '../imgs/007.gif'
import logo7 from '../imgs/008.gif'
import logo8 from '../imgs/009.gif'
class Myshoplist extends Component {
    constructor(props){
        super(props);
        this.state = {
            currentIndex:0,
            arr:[
                {name:"活动专区",
                list:[
                    {shop:'活动专区1',pic:logo},
                    {shop:'活动专区2',pic:logo},
                    {shop:'活动专区3',pic:logo},
                    {shop:'活动专区4',pic:logo},
                    {shop:'活动专区5',pic:logo},
                    {shop:'活动专区6',pic:logo},
                    {shop:'活动专区5',pic:logo},
                    {shop:'活动专区6',pic:logo},
                    {shop:'活动专区7',pic:logo},
                    {shop:'活动专区8',pic:logo},
                    ]
               },
               {name:"品牌",
               list:[
                   {shop:'品牌1',pic:logo1},
                   {shop:'品牌2',pic:logo1},
                   {shop:'品牌3',pic:logo1},
                   {shop:'品牌4',pic:logo1},
                   {shop:'品牌5',pic:logo1},
                   {shop:'品牌6',pic:logo1},
                   {shop:'品牌7',pic:logo1},
                   {shop:'品牌8',pic:logo1},
                   ]
              },
              {name:"美容护肤",
              list:[
                  {shop:'美容护肤1',pic:logo2},
                  {shop:'美容护肤2',pic:logo2},
                  {shop:'美容护肤3',pic:logo2},
                  {shop:'美容护肤4',pic:logo2},
                  {shop:'美容护肤5',pic:logo2},
                  {shop:'美容护肤6',pic:logo2},
                  {shop:'美容护肤7',pic:logo2},
                  {shop:'美容护肤8',pic:logo2},
                  ]
             },
             {name:"彩妆",
             list:[
                 {shop:'彩妆1',pic:logo3},
                 {shop:'彩妆2',pic:logo3},
                 {shop:'彩妆3',pic:logo3},
                 {shop:'彩妆4',pic:logo3},
                 {shop:'彩妆5',pic:logo3},
                 {shop:'彩妆6',pic:logo3},
                 {shop:'彩妆7',pic:logo3},
                 {shop:'彩妆8',pic:logo3},
                 ]
            },
            {name:"香水",
            list:[
                {shop:'香水1',pic:logo4},
                {shop:'香水2',pic:logo4},
                {shop:'香水3',pic:logo4},
                {shop:'香水4',pic:logo4},
                {shop:'香水5',pic:logo4},
                {shop:'香水6',pic:logo4},
                {shop:'香水7',pic:logo4},
                {shop:'香水8',pic:logo4},
                ]
           },
           {name:"酒类",
           list:[
               {shop:'酒类1',pic:logo5},
               {shop:'酒类2',pic:logo5},
               {shop:'酒类3',pic:logo5},
               {shop:'酒类4',pic:logo5},
               {shop:'酒类5',pic:logo5},
               {shop:'酒类6',pic:logo5},
               {shop:'酒类7',pic:logo5},
               {shop:'酒类8',pic:logo5},
               ]
          },
          {name:"腕表首饰",
          list:[
              {shop:'腕表首饰1',pic:logo6},
              {shop:'腕表首饰2',pic:logo6},
              {shop:'腕表首饰3',pic:logo6},
              {shop:'腕表首饰4',pic:logo6},
              {shop:'腕表首饰5',pic:logo6},
              {shop:'腕表首饰6',pic:logo6},
              {shop:'腕表首饰7',pic:logo6},
              {shop:'腕表首饰8',pic:logo6},
              ]
         },
         {name:"服饰箱包",
         list:[
             {shop:'服饰箱包1',pic:logo7},
             {shop:'服饰箱包2',pic:logo7},
             {shop:'服饰箱包3',pic:logo7},
             {shop:'服饰箱包4',pic:logo7},
             {shop:'服饰箱包5',pic:logo7},
             {shop:'服饰箱包6',pic:logo7},
             {shop:'服饰箱包7',pic:logo7},
             {shop:'服饰箱包8',pic:logo7},
             ]
        },
        {name:"食品保健",
        list:[
            {shop:'食品保健1',pic:logo8},
            {shop:'食品保健2',pic:logo8},
            {shop:'食品保健3',pic:logo8},
            {shop:'食品保健4',pic:logo8},
            {shop:'食品保健5',pic:logo8},
            {shop:'食品保健6',pic:logo8},
            {shop:'食品保健7',pic:logo8},
            {shop:'食品保健8',pic:logo8},
            ]
       },
        ],
        },
        this.handClick.bind(this);       
    }

    handClick(index){
        this.setState({
            currentIndex:index
        },()=>{
            console.log(this.state.currentIndex);            
        })
    }

    render() {
        return (
            <div className="big">
                <div className="left">
                    {
                        this.state.arr.map((item,index)=>{
                            return (
                               <div className={`btn ${this.state.currentIndex == index ? 'active':''}` }  key={index} onClick={ ()=>{  
                                this.handClick(index)  
                                }  }>{item.name}</div>
                            )
                        })
                    }
                </div>
                <div className="right">
                        {
                        //渲染右侧列表
                        this.state.arr[this.state.currentIndex].list.map((item,index)=>{
                            //sfkshdfkhsdfkh
                            return (
                            <div key={index} className="item">
                                <img src={item.pic} alt="" />
                                <div className="name">{item.shop}</div>
                            </div>
                            )
                        })
                        }
                </div>
            </div>
        );
    }
}

export default Myshoplist;